<template>
  <Dialog v-model="visible" :title="title" width="90%">
    <el-form ref="formRef" v-loading="loading" :model="form" :rules="formRules" label-width="100px">
      <el-form-item label="标 题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" />
      </el-form-item>
    </el-form>

    <el-divider>明 细</el-divider>

    <el-table v-loading="loading" :data="list" border highlight-current-row stripe>
      <el-table-column type="selection" width="64" />
      <el-table-column type="index" label="序 号" width="80" align="center" fixed />
      <el-table-column sortable="true" label="物料名称" align="center" prop="materialName" />
      <el-table-column sortable="true" label="数 量" align="center" prop="quantity" width="180" />
      <el-table-column sortable="true" label="有效期至" align="center" prop="exp" width="180" />
      <el-table-column label="操 作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleExp(scope.row)"> 编辑有效期 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="formData.pageNum"
      v-model:limit="formData.pageSize"
      @pagination="getPage"
    />

    <template #footer>
      <el-button :disabled="loading" type="primary" @click="submitForm">入 库</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" name="Update" setup>
import * as Api from '@/api/userCenter/material/purchase'
import * as PurchaseOrderItemApi from '@/api/userCenter/material/purchase/purchaseOrderItem'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表的加载中
const total = ref<number>(0) // 列表的总页数
const list = ref([]) // 列表的数据
const visible = ref(false) // 弹窗的是否展示
const title = ref(`编辑信息`) // 弹窗的标题
const form = ref({
  id: '',
  title: '',
  content: ''
})
const formData = reactive({
  pageNum: 1,
  pageSize: 20,
  searchValue: '',
  filters: '',
  sortOrder: 'DESC', // 排序,asc／desc
  sortName: 'order_num', // 排序,字段
  title: '',
  orderId: ''
})
const formRules = reactive({
  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id?: string) => {
  visible.value = true
  title.value = '编辑入库单'
  // resetForm()
  // 修改时,设置数据
  if (id) {
    loading.value = true
    form.value.id = id
    try {
      let val = await Api.getById(id)
      if (val) {
        form.value = val

        console.log(form.value)
      }
    } catch (t) {
      console.log(t)
    } finally {
      loading.value = false
    }
  }

  getPage()
}

/** 查询列表 */
const getPage = async () => {
  list.value = []
  total.value = 0
  loading.value = true
  try {
    formData.orderId = form.value.id
    const data = await PurchaseOrderItemApi.getPage(formData)
    list.value = data.list
    total.value = data.total
  } catch (t) {
    console.log(t)
    loading.value = false
    message.error('查询列表失败')
  } finally {
    loading.value = false
  }
}

defineExpose({ open }) // 提供 open 方法,用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
  // 提交请求
  loading.value = true
  try {
    await Api.purchaseInstock(form.value.id)
    message.success('入库操作成功')
    visible.value = false
    // 发送操作成功的事件
    emit('success')
  } catch (t) {
    console.log(t)
    loading.value = false
    message.error('提交表单失败')
  } finally {
    loading.value = false
  }
}

/** 重 置表单 */
const resetForm = () => {
  form.value = {
    id: '',
    title: '',
    content: ''
  }
  formRef.value?.resetFields()
}

const handleExp=async(item)=>{

  console.log(item)

}

/** 删除按钮操作 */
const handleDel = async (id: string) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PurchaseOrderItemApi.del(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getPage()
  } catch {}
}
</script>
